<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <script src="./jquery-1.8.3.min.js"></script>
    <script src="./mock.js"></script>
    <link href="./nav.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">
    <title>Document</title>
</head>

<body>
    <div id="app">
    <!-- <nav class="navbar fixed-top navbar-light bg-light" id="daohang">
    </nav> -->
    <!-- 上半导航条 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="sdaohang" style="z-index:99999 ;">
        <li class="nav-item pl-5">
            <a class="nav-link active" href="https://www.nike.com/cn/jordan">
                <svg height="24px" width="24px" fill="#111" viewBox="0 0 26 32">
                    <path
                        d="M14.4 5.52v-.08q0-.56.36-1t.92-.44 1 .36.48.96-.36 1-.96.4l-.24.08.08.12-.08.44-.16 1.28q.08.08.08.16l-.16.8q-.08.16-.16.24l-.08.32q-.16.64-.28 1.04t-.2.64V12q-.08.4-.12.64t-.28.8q-.16.32 0 1.04l.08.08q0 .24.2.56t.2.56q.08 1.6-.24 2.72l.16.48q.96.48.56 1.04l.4.16q.96.48 1.36.84t.8.76q.32.08.48.24l.24.08q1.68 1.12 3.36 2.72l.32.24v.08l-.08.16.24.16h.08q.24.16.32.16h.08q.08 0 .16-.08l.16-.08q.16-.16.32-.24h.32q.08 0 0 .08l-.32.16-.4.48h.56l.56.08q.24-.08.4-.16l.4-.24q.24-.08.48.16h.08q.08.08-.08.24l-.96.88q-.4.32-.72.4l-1.04.72q-.08.08-.16 0l-.24-.32-.16-.32-.2-.28-.24-.32-.2-.24-.16-.2-.32-.24q-.16 0-.32-.08l-1.04-.8q-.24 0-.56-.24-1.2-1.04-1.6-1.28l-.48-.32-.96-.16q-.48-.08-1.28-.48l-.64-.32q-.64-.32-.88-.32l-.32-.16q-.32-.08-.48-.16l-.16-.16q-.16 0-.32.08l-1.6.8-2 .88q-.8.64-1.52 1.04l-.88.4-1.36.96q-.16.16-.32 0l-.16.16q-.24.08-.32.08l-.32.16v.16h-.16l-.16.24q-.16.32-.32.36t-.2.12-.08.12l-.16.16-.24.16-.36-.04-.48.08-.32.08q-.4.08-.64-.12t-.4-.6q-.16-.24.16-.4l.08-.08q.08-.08.24-.08h.48L1.6 26l.32-.08q0-.16.08-.24.08-.08.24-.08v-.08q-.08-.16-.08-.32-.08-.16-.04-.24t.08-.08h.04l.08.24q.08.4.24.24l.08-.16q.08-.16.24-.16l.16.16.16-.16-.08-.08q0-.08.08-.08l.32-.32q.4-.48.96-.88 1.12-.88 2.4-1.36.4-.4.88-.4.32-.56.96-1.2.56-.4.8-.56.16-.32.4-.32H10l.16-.16q.16-.08.24-.16v-.4q0-.4.08-.64t.4-.24l.32-.32q-.16-.32-.16-.72h-.08q-.16-.24-.16-.48-.24-.4-.32-.64h-.24q-.08.24-.4.32l-.08.16q-.32.56-.56.84t-.88.68q-.4.4-.56.88-.08.24 0 .48l-.08.16h.08q0 .16.08.16h.08q.16.08.16.2t-.24.08-.36-.16-.2-.12l-.24.24q-.16.24-.32.2t-.08-.12l.08-.08q.08-.16 0-.16l-.64.16q-.08.08-.2 0t.04-.16l.4-.16q0-.08-.08-.08-.32.16-.64.08l-.4-.08-.08-.08q0-.08.08-.08.32.08.8-.08l.56-.24.64-.72.08-.16q.32-.64.68-1.16t.76-.84l.08-.32q.16-.32.32-.56t.4-.64l.24-.32q.32-.48.72-.48l.24-.24q.08-.08.08-.24l.16-.16-.08-.08q-.48-.4-.48-.72-.08-.56.36-.96t.88-.36.68.28l.16.16q.08 0 .08.08l.32.16v.24q.16.16.16.24.16-.24.48-.56l.4-1.28q0-.32.16-.64l.16-.24v-.16l.24-.96h.16l.24-.96q.08-.24 0-.56l-.32-.8z">
                    </path>
                </svg>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="https://www.converse.com.cn/">
                <svg height="24px" width="24px" fill="#111" viewBox="0 0 39 33">
                    <path
                        d="M10.94 25.626l-4.236-5.501L.201 22.28l3.734-5.756L.11 10.777l6.59 2.031 4.026-5.474.14 6.785 6.64 2.175-6.594 2.446.028 6.886zm.824 7.239l13.952-16.393L11.806.107h11.697l14.871 16.389-14.8 16.369h-11.81z">
                    </path>
                </svg>
            </a>
        </li>
        <li class="nav-item dropdown ml-auto" id="srdaohang">
            <a class="nav-link text-secondary" href="#" id="bangzhu" role="button" data-toggle="dropdown"
                data-haspopup="true" aria-expanded="true" style="font-size: small;">帮助</a>
            <div class="dropdown-menu" aria-labelledby="bangzhu" id="bzxiala">
                <a class="dropdown-item" style="padding-bottom:12px;">帮助</a>
                <a class="dropdown-item" v-for="item in help" style="font-size: 14px;color: #888;">{{item}}</a>
            </div>
        </li>
        <span class="pre-help-separator ">|</span>
        <li class="nav-item dropdown">
            <a class="nav-link text-secondary" href="#" id="zhanghu" role="button" data-toggle="dropdown"
                data-haspopup="true" aria-expanded="true" style="font-size: small;">您好
                <svg class="icon-btn ripple rounded-circle icon-secondary" aria-hidden="true" data-var="glyph"
                    fill="#111" height="30px" width="30px" viewBox="0 0 24 24" role="button" data-toggle="dropdown"
                    id="zhanghuT">
                    <path
                        d="M16.44 11A5.94 5.94 0 0 0 18 7 6 6 0 0 0 6 7a5.94 5.94 0 0 0 1.56 4A5 5 0 0 0 3 16v5a1 1 0 0 0 2 0v-5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v5a1 1 0 0 0 2 0v-5a5 5 0 0 0-4.56-5zM8 7a4 4 0 1 1 4 4 4 4 0 0 1-4-4z">
                    </path>
                </svg>
            </a>
            <div class="dropdown-menu" aria-labelledby="zhanghu" id="zhxiala">
                <a class="dropdown-item" style="padding-bottom: 12px;">账户</a>
                <a class="dropdown-item" v-for="item in zhanghu" style="font-size: 14px;color: #888;">{{item}}</a>
            </div>
        </li>
    </nav>
    <!-- 下半导航条 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top " id="xdaohang">
        <!-- 耐克图标 -->
        <li class="nav-item pl-5" id="nikeT">
            <a class="d-sm-b prl2-sm prl3-lg" href="https://www.nike.com/cn/">
                <svg class="pre-logo-svg" height="60px" width="60px" fill="#111" viewBox="0 0 69 32">
                    <path
                        d="M68.56 4L18.4 25.36Q12.16 28 7.92 28q-4.8 0-6.96-3.36-1.36-2.16-.8-5.48t2.96-7.08q2-3.04 6.56-8-1.6 2.56-2.24 5.28-1.2 5.12 2.16 7.52Q11.2 18 14 18q2.24 0 5.04-.72z">
                    </path>
                </svg>
            </a>
        </li>

        <ul id="nav2">
            <li  @mouseleave="hid()">
              <a href="#"  @mouseenter="show()">新品尝鲜</a>
              <!-- 下拉框 -->
              <div class="down" v-show="flagdown">
                <div style="margin-left: 140px;">
                <ul v-for="item in arrdown">{{item.name}}
                    <li v-for="items in item.aa">{{items}}</li>
                </ul>
               </div>
             </div>
            </li>
            <li  @mouseleave="hid2()">
              <a href="#" @mouseenter="show2()">男子</a>
              <!-- 下拉框 -->
              <div class="down" v-show="flagdown2">
                <div style="margin-left: 140px;">
                <ul v-for="item in arrdown1">{{item.name}}
                    <li v-for="items in item.aa">{{items}}</li>
                </ul>
               </div>
            </li>
            <li  @mouseleave="hid3()">
              <a href="#" @mouseenter="show3()">女子</a>
              <!-- 下拉框 -->
              <div class="down" v-show="flagdown3">
                <div style="margin-left: 140px;">
                <ul v-for="item in arrdown1">{{item.name}}
                    <li v-for="items in item.aa">{{items}}</li>
                </ul>
               </div>
            </li>
            <li  @mouseleave="hid4()">
                <a href="#" @mouseenter="show4()">儿童</a>
                <!-- 下拉框 -->
              <div class="down" v-show="flagdown4">
                <div style="margin-left: 140px;">
                <ul v-for="item in arrdown2">{{item.name}}
                    <li v-for="items in item.aa">{{items}}</li>
                </ul>
               </div>
              </li>
            <li>
                <a href="#" >专属定制</a>
            </li>
          </ul>
        <!-- 搜索框 -->
        <li class="search1">
            <form method="get" id="search2">
                <fieldset class="search">
                    <button class="btn rounded-circle" id="searchb">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bibi-search" viewBox="0 0 16 16">
                            <path
                                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z">
                            </path>
                        </svg>
                    </button>
                    <input type="text" class="box inputText" id="searcht" placeholder="搜索" />
                </fieldset>
            </form>
        </li>
        <!-- 收藏 -->
        <li class="heart">
            <div class=" rounded-circle" id="heart">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-heart"
                    viewBox="0 0 16 16">
                    <path
                        d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z" />
                </svg>
            </div>
        </li>
        <!-- 购物车 -->
        <li class="buy">
            <div class=" rounded-circle" id="buy">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-handbag"
                    viewBox="0 0 16 16">
                    <path
                        d="M8 1a2 2 0 0 1 2 2v2H6V3a2 2 0 0 1 2-2zm3 4V3a3 3 0 1 0-6 0v2H3.36a1.5 1.5 0 0 0-1.483 1.277L.85 13.13A2.5 2.5 0 0 0 3.322 16h9.355a2.5 2.5 0 0 0 2.473-2.87l-1.028-6.853A1.5 1.5 0 0 0 12.64 5H11zm-1 1v1.5a.5.5 0 0 0 1 0V6h1.639a.5.5 0 0 1 .494.426l1.028 6.851A1.5 1.5 0 0 1 12.678 15H3.322a1.5 1.5 0 0 1-1.483-1.723l1.028-6.851A.5.5 0 0 1 3.36 6H5v1.5a.5.5 0 1 0 1 0V6h4z" />
                </svg>
            </div>
        </li>
    </nav>
</div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flagdown:false,
                flagdown2:false,
                flagdown3:false,
                flagdown4:false,
                down1:1,
                help:['订单状态','配送','退换货','联系我们','隐私政策','销售条款','使用条款','向我们发送反馈'],
                zhanghu:['档案','订单','收藏','收件箱','体验','账户设置','退出'],
                arrdown:[
                    {
                        name:'潮流趋势',
                        aa:['街舞专属系列','上海时装周同款','基础百搭体恤','辣妹风','配件/装备',]
                    },
                    {
                        name:'新品上市',
                        aa:['本月所有新品','男子新品','女子新品','儿童新品','JORDAN新品',]
                    },
                    {
                        name:'尖货专区',
                        aa:['NIKE APP专属尖货','SNKRS新品上市','耐看读物',]
                    },
                ],
                arrdown1:[
                    {
                        name:'鞋类',
                        aa:['所有鞋类','跑步','篮球','休闲','足球','拖鞋','运动/健身','滑板','网球',]
                    },
                    {
                        name:'服装',
                        aa:['所有服装','T恤','短裤','球衣','连帽衫/卫衣','运动裤/休闲裤','外套/夹克',]
                    },
                    {
                        name:'运动集结',
                        aa:['NBA','跑步','滑板','瑜伽','网球','折扣优惠','会员限定',]
                    },
                ],
                arrdown2:[
                    {
                        name:'鞋类',
                        aa:['所有鞋类','婴童(11CM-16CM)','幼童(17CM-22CM)','大童(35.5-40欧码)',]
                    },
                    {
                        name:'服装',
                        aa:['所有服装','婴童(85-104CM)','幼童(96-122CM)','大童(122-170CM)',]
                    },
                    {
                        name:'配件',
                        aa:['包','袜子','帽子和头带','太阳镜']
                    },
                ],
                
            },
            methods: {
                show(){             //显示与隐藏
                    this.flagdown = !this.flagdown;
                },
                hid(){             //显示与隐藏
                    this.flagdown = !this.flagdown;
                },
                show2(){             //显示与隐藏
                    this.flagdown2 = !this.flagdown2;
                },
                hid2(){             //显示与隐藏
                    this.flagdown2 = !this.flagdown2;
                },
                show3(){             //显示与隐藏
                    this.flagdown3 = !this.flagdown3;
                },
                hid3(){             //显示与隐藏
                    this.flagdown3 = !this.flagdown3;
                },
                show4(){             //显示与隐藏
                    this.flagdown4 = !this.flagdown4;
                },
                hid4(){             //显示与隐藏
                    this.flagdown4 = !this.flagdown4;
                },
            },
        })
    </script>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>